import { Component } from "react";
import { Route, Link, Switch, Redirect } from "react-router-dom";

import Menu from "./components/Menu";
import Home from "./views/Home";
import About from "./views/About";
import One from "./views/One";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <Link to="/home">GoHome</Link>
            <br />
            <Link to="/about">GoAbout</Link>

            <Menu />
          </div>
          <div className="right">
            <Switch>
              <Route path="/home" component={Home} />

              <Route
                path="/about"
                render={(props) => {
                  console.log("props", props);
                  return <About {...props} />;
                }}
              />

              <Route path="/one">{(props) => <One {...props} />}</Route>

              {/* 
                没有设置 from 当代码执行到这个 Redirect 时，就会都重定向到 /home 
                
                有设置 from 的时候，重定向还需要满足这个 from 的来源条件
              */}
              <Redirect from="/hello" to="/home" />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
